<template>
  <span>{{ translatedValue }}</span>
</template>

<script>
import { handleDict } from '@/api/ft'

export default {
  // 当前页面名称（组件）
  name: 'FtDictTranslate',
  // 引用组件
  components: { },
  directives: { },
  filters: {},
  props: {
    // 枚举码值
    value: {
      type: String,
      required: false
    },
    // 枚举类型（用于请求后端）
    dictType: {
      type: String,
      required: true
    },
    // 是否显示码值
    showCode: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 存储枚举映射
      dictMap: {}
    }
  },
  computed: {
    // 获取翻译后的文本
    translatedValue() {
      // 处理 value 为 undefined 的情况
      if (this.value === undefined) {
        return '-'
      }
      // 从枚举映射中查找值
      const translated = this.dictMap[this.value]
      // 根据showCode决定是否拼接码值
      if (this.showCode) {
        return [this.value, '-', translated].join(' ')
      }

      return translated
    }
  },
  watch: {
    // 当枚举类型变化时重新获取数据
    dictType: {
      immediate: true,
      handler(newVal) {
        this.handleInit(newVal)
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 获取枚举数据
    async handleInit(newVal) {
      handleDict({ type: newVal }).then(res => {
        if (res.data) {
          this.dictMap = res.data
        }
      })
    }
  }
}
</script>
